<template>
  <div>
    <el-container>
      <el-header class="layout-header" style="height: 52px;">
        <el-row :gutter="20">
          <el-col :span="3">
            <div style="height: 100%;height: 52px"><img
                src="http://8.130.116.173:9000/zhaopian/导航栏.png"
                alt="logo" class="img-logo"></div>
          </el-col>
          <el-col :span="12">
            <div style="height: 100%;height: 52px;position: absolute;top: 20%;">
              <i class="el-icon-s-custom"
                style="border-radius:5px;background-color: #027AFF;width: 32px;height: 32px;color:white;padding-top: 8px;padding-left:8px;box-sizing: border-box;"></i>
              <span style="position: relative;left: 10px;font-size:14px">管理协作服务平台</span>
            </div>
          </el-col>
          <el-col :span="9">
            <i class="el-icon-chat-dot-square"
              style="width: 32px;height: 32px;font-weight: bolder; position: absolute; right: 10%;top: 37%"></i>
            <i class="el-icon-user"
              style="width: 32px;height: 32px;font-weight: bolder; position: absolute; right: 8%;top: 36%"></i>
            <div style="height: 32px;font-weight: bolder; position: absolute;right: 2%;top: 27%">
              <span>{{ user.username }}</span>
              <el-popover
                  placement="bottom"
                  width="150"
                  trigger="hover" transition="el-zoom-in-bottom" open-delay="200" close-delay="200">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo-denglu-setting" style="width: 100%;" @select="settingLoginSelect">
                  <el-menu-item index="1"  style="width: 100%;height: 35px;text-align: center;line-height: 35px;font-size: 14px">
                    <i class="el-icon-switch-button"></i>
                    <span slot="title">退出登录</span>
                  </el-menu-item>
                </el-menu>
                <i class="el-icon-s-tools" id="user-tools" slot="reference"
                   style="width: 32px;height: 32px;font-weight: bolder;position: relative;top: 2px;left: 8px;cursor: pointer;"></i>
              </el-popover>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container class="layout-body">
        <el-aside width="auto" class="layout-aside">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu router :default-active="$router.currentRoute.path" class="el-menu-vertical-demo" @open="handleOpen"
                @close="handleClose" @select="handleSelect" background-color="#444555" text-color="#fff" :collapse="isCollapse"
                active-text-color="#3595FF">
                <el-menu-item index="/admin">
                  <slot title="商品信息管理"></slot>
                  <i class="el-icon-s-promotion"></i><span id="/admin" slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-s-shop"></i>
                    <span>商品信息管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/admin/product/info"><i class="el-icon-knife-fork"></i><span
                        id="/admin/product/info">商品信息</span></el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <el-menu-item index="/admin/product/type"><i class="el-icon-orange"></i><span
                        id="/admin/product/type">商品类型</span></el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="el-icon-picture"></i>
                    <span>文件管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/admin/file/list"><i class="el-icon-s-finance"></i><span
                        id="/admin/file/list">文件列表</span></el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="layout-main">
          <div style="margin-top: -30px;padding-top: 10px;box-sizing: border-box" >
            <i class="el-icon-s-unfold" v-if="isCollapse" style="font-size: 24px;" @click="showMenu"></i>
            <i class="el-icon-s-fold" v-else style="font-size: 24px;" @click="showMenu"></i>
          </div>
          <div style="height: 25px" >
          <el-divider content-position="left" style="height: 20px">
            <h3>{{ topTitle }}</h3>
          </el-divider>
          </div>
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
            <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            </el-tab-pane>
          </el-tabs>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: ''
      },
      topTitle: '',
      editableTabsValue: '/gaokang',
      editableTabs: [],
      isCollapse:false
    }
  },
  methods: {
    settingLoginSelect(key, keyPath)
    {
      if (key == 1)
      {
        this.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("user");
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          });
          location.reload();
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消退出登录'
          });
        });
      }
    },
    handleOpen(key, keyPath) {
      console.log(key);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      let title = document.getElementById(key).innerHTML;
      let obj = { title: title, name: key };
      console.log(this.editableTabs)
      if (!this.editableTabs.some(item => item.name === obj.name && item.title === obj.title)) {
        this.editableTabs.push(obj);
      }
      this.editableTabsValue = key;
      this.topTitle = title;
    },
    clickTab(tab) {
      if (this.$router.currentRoute.path != tab.name) {
        this.$router.push(tab.name);
        this.topTitle = tab.label;
      }
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
              this.topTitle = nextTab.title;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      if (this.$router.currentRoute.path != activeName) {
        this.$router.push(activeName);
      }
    },
    showMenu()
    {
      this.isCollapse = !this.isCollapse;
    }
  },
  mounted() {
    if (localStorage.getItem("token") == null) {
      this.$notify.error({
        title: '错误',
        message: '未登录,请先登录!'
      });
      this.$router.push("/login");
    }
    let path = this.$router.currentRoute.path;
    let title = document.getElementById(path).innerHTML;
    let obj = { title: title, name: path };
    if (!this.editableTabs.some(item => item.name === obj.name && item.title === obj.title)) {
      this.editableTabs.push(obj);
    }
    this.editableTabsValue = path;
    this.topTitle = title;
    this.user.username = JSON.parse(localStorage.getItem("user")).username;
  }
}
</script>

<style>
.layout-header {
  background-color: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.img-logo {
  width: 120px;
  height: 31px;
  position: relative;
  top: 20%;
  left: 20%;
}

.layout-header h1 {
  color: #fff;
  line-height: 52px;
}

.layout-body {
  position: absolute;
  top: 53px;
  bottom: 0;
  left: 0;
  right: 0;
}

.layout-aside {
  background-color: rgb(68, 69, 85) !important;
  color: black !important;

}

.layout-aside i {
  margin-left: 5px;
  color: #92c6ff !important;
}

.layout-main {
  background-color: #ffffff;
}

#user-tools:hover {
  color: aqua;
}

.el-menu-item.is-active {
  background: #E8F3FF !important;
  font-weight: bolder;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>